<template>
  <div id="fu">
    <div id="desc">
      <i class="el-icon-collection"></i>
      <span>选修课程</span>
    </div>

    <div class="contine">
      <!-- 搜索栏 -->
      <el-row>
        <el-col :span="11" :offset="13">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="formInline.cname" placeholder="课程名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="formInline.uname" placeholder="老师名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!-- 分页条 -->
      <el-row class="el-nav">
        <el-col :span="24">
          <el-pagination
            background
            layout="prev, pager, next"
            :pager-count="pageCount"
            :page-size="formInline.pageSize"
            :page-count="formInline.pageNum"
            :total="formInline.total"
            @current-change="handleCurrentChange">
          </el-pagination>
        </el-col>
      </el-row>

      <!-- 表格内容 -->
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="courseId"
              label="课程Id"
              width="180">
            </el-table-column>
            <el-table-column
              prop="courseName"
              label="课程名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="teacherName"
              label="教师">
            </el-table-column>
            <el-table-column
              prop="courseCredit"
              label="学分">
            </el-table-column>
            <el-table-column
              prop="courseTime"
              label="上课时间">
            </el-table-column>
            <el-table-column
              prop="courseSelectedCount"
              label="已选人数">
            </el-table-column>
            <el-table-column
              prop="courseMaxSize"
              label="课程容量">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">选修
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import {get} from "../../common/request";

export default {
  name: "ChooseCourse",
  data() {
    return {
      formInline: {
        cname: "",
        uname: "",
        pageNum: 1,
        pageSize: 8,
        total: 0
      },
      pageCount: 5,
      tableData: []
    }
  },
  methods: {
    onSubmit() {
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleEdit(index, row) {
      //console.log(index, row)
      get("/student-course/select-course/" + row.courseId).then(x => {
        //console.log(x);
        if (x.code === 1) {
          this.$message.success(x.msg)
          this.getData();
        } else {
          this.$message.error(x.msg)
        }
      })
    },
    getData() {
      get("/course/getCourseInfo", this.formInline).then(x => {
        //赋值列表数据 - 分页数据是存放在 list 中的
        //console.log(x.data);
        this.tableData = x.data.list;
        this.formInline.pageNum = x.data.pageNum;
        this.formInline.pageSize = x.data.pageSize;
        this.formInline.total = x.data.total;
      })
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<style scoped>
#fu {
  padding: 0 15px;
  background-color: rgb(240, 240, 240);
}

#desc {
  font-size: 14px;
  padding: 15px 0;
}

.contine {
  background-color: white;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 10px 30px;
}

.el-nav {
  text-align: center;
  margin-bottom: 10px;
}
</style>
